<h1>购物车</h1>

<div *ngIf="!carts || carts.length===0">
  购物车中没有商品，请先去
  <a routerLink="/shop">商店页面</a>
  添加。
</div>
<div *ngIf="!!carts && carts.length > 0">
  <table>
    <tr>
      <th>商品名称</th>
      <th>商品价格</th>
      <th>操作</th>
    </tr>
    <tr *ngFor="let item of carts">
      <td>
        {{item.name}}
      </td>
      <td>
        {{item.price}}
      </td>
      <td>
        <button (click)="removeFromCart(item)">从购物车中移除</button>
      </td>
    </tr>
  </table>
  <button (click)="pay()">结算</button>
  <span *ngIf="!!price">结算成功，共需花费{{price}}</span>
</div>
